<!--计费与返还清单查询页面-->
<template>
  <div class="app-container">
    <ht-search-form
      v-show="showSearch"
      :dictMap="dictMap"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="[]"
      :beforeSearchCallback="true"
      @beforeSearchCallback="beforeSearchCallback"
      :clearCallBack="clearCallBack"
    >
      <template slot="endSlotOption">
        <el-form
          ref="searchForm"
          :model="queryParams"
          :rules="rules"
          labelWidth="88px"
          :inline="true"
          :hide-required-asterisk="true"
          class="form-container"
        >
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="计费年份" prop="workdateYear">
                <el-date-picker
                  v-model="queryParams.workdateYear"
                  type="year"
                  value-format="yyyy"
                  placeholder="选择年"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计费月份开始" prop="workdateMonth">
                <el-select clearable v-model="queryParams.workdateMonth" placeholder="请选择" @change="changeMonth('begin')">
                  <el-option v-for="item in selectWorkdateMonth"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"
                             :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计费月份结束" prop="workdateMonth1">
                <el-select clearable v-model="queryParams.workdateMonth1" placeholder="请选择" @change="changeMonth('end')">
                  <el-option v-for="item in selectWorkdateMonth1" :key="item.value"
                             :label="item.label"
                             :value="item.value"
                             :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </ht-search-form>
    <ht-table
      ref="dataTable"
      :showSerialNumber="false"
      :multi-select="false"
      :dictMap="dictMap"
      :reqConfig="reqConfig"
      :queryParams="queryParams"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
    >
      <template v-slot:operate>
        <el-table-column label="操作" align="center" width="120" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <ht-button-group
              :buttonList="[
                {
                  label: '明细',
                  // permission: 'user:xxx:xxx',
                  doFunc: () => {
                    handleAction('detials', scope.row);
                  },
                },
              ]"
            />
          </template>
        </el-table-column>
      </template>
    </ht-table>
    <!-- 明细弹出框 -->
    <billing-details ref="billingDetailsDialog" :dictMap="dictMap" :formData.sync="formData"></billing-details>
  </div>
</template>
<script>
import { apiUrlConfig, detail } from "@/api/cnaps/saps/otherCommQuery/billing_list_query.js";
import BillingDetails from "./components/billingDetails";
import { listPageMixin } from "@/libs/listPageMixin";
import { log } from "util";
import { amountThousandsFormatter } from "@/utils/table_col_formatter";

export default {
  name: "billingListQuery",
  mixins: [listPageMixin],
  components: {
    BillingDetails,
  },
  data() {
    return {
      reqConfig: apiUrlConfig,
      total: 0,
      dataList: [],
      //数据字典
      searchFormDictList: ["CHARGETYPECODE", "PKG_STATUS", "PKG_TYPE", "SYSTEMCODE", "PROCESSSTATUS"],
      //  明细弹框数据
      // form表单字段
      formData: {},
      showSearch: true,
      selectWorkdateMonth: [],
      selectWorkdateMonth1: [],
      // 查询参数
      queryParams: {
        workdateYear: "",
        workdateMonth: "",
        workdateMonth1: "",
      },
      rules: {
        workdateYear: [{ required: false, message: "请选择年份", trigger: "change" }],
        workdateMonth: [{ required: false, message: "大于最大值", trigger: "change" }],
        workdateMonth1: [{ required: false, message: "小于最小值", trigger: "change" }],
      },
      formOptions: [],
      opButtonList: () => {
        return [];
      },
      tableBindColumns: [
        { label: `系统流水号`, prop: "id", width: "270", sortable: false },
        {
          label: `计费与返还类型`,
          prop: "chgType",
          sortable: false,
          width: "200",
          dictCode: "CHARGETYPECODE",
        },
        {
          label: `计费直接参与者`,
          prop: "chgPtcpt",
          sortable: false,
          width: "200",
        },
        {
          label: `计费直接参与者名称`,
          prop: "chgPtcptName",
          width: "270",
          sortable: false,
        },
        {
          label: `计费年月`,
          prop: "chgMonth",
          width: "160",
          sortable: false,
          type: "date",
        },
        {
          label: `接收时间`,
          prop: "rcvTime",
          sortable: false,
          type: "date",
        },
      ],
    };
  },
  created() {
    this.queryParams.workdateYear = new Date().getFullYear().toString();
    for (let i = 1; i <= 12; i++) {
      const value = {
        value: i.toString().padStart(2, '0'),
        label: i,
        disabled: false
      }
      const value1 = {...value};
      this.selectWorkdateMonth.push(value);
      this.selectWorkdateMonth1.push(value1)
    }
  },
  mounted() {},
  methods: {
    changeMonth(month) {
      if ('begin' === month) {
        if(this.queryParams.workdateMonth1 < this.queryParams.workdateMonth) {
          this.queryParams.workdateMonth1 = "";
        }
        for (let i = 0; i < 12; i++) {
          this.selectWorkdateMonth1[i].disabled = i < this.queryParams.workdateMonth - 1 ? true : false;
        }
      } else if ('end' === month) {
        if(this.queryParams.workdateMonth1 !== "" && this.queryParams.workdateMonth > this.queryParams.workdateMonth1) {
          this.queryParams.workdateMonth = "";
        }
        for (let i = 0; i < 12; i++) {
          this.selectWorkdateMonth[i].disabled = false;
        }
        if(this.queryParams.workdateMonth1 === "") {
          return;
        }
        for (let i = this.queryParams.workdateMonth1; i < 12; i++) {
          this.selectWorkdateMonth[i].disabled = true;
        }
      }
    },

    editComplete(state) {
      if (state == true) {
      }
    },
    beforeSearchCallback() {
      if (!this.queryParams.workdateYear && (this.queryParams.workdateMonth !== "" || this.queryParams.workdateMonth1 !== "")) {
        this.$message.warning("计费年份默认当年")
        this.queryParams.workdateYear = new Date().getFullYear().toString();
      }
      // // 搜索按钮之前先执行
      // if (this.queryParams.workdateMonth || this.queryParams.workdateMonth1) {
      //   this.$set(this.rules.workdateYear[0], "required", true);
      // } else {
      //   this.$set(this.rules.workdateYear[0], "required", false);
      // }
      // if (this.queryParams.workdateMonth > this.queryParams.workdateMonth1) {
      //   this.$set(this.rules.workdateMonth[0], "required", true);
      //   this.$set(this.rules.workdateMonth1[0], "required", true);
      // } else {
      //   this.$set(this.rules.workdateMonth[0], "required", false);
      //   this.$set(this.rules.workdateMonth1[0], "required", false);
      // }
    },
    clearCallBack() {
      return new Promise((resolve, reject) => {
        this.queryParams.workdateYear = "";
        this.queryParams.workdateMonth = "";
        this.queryParams.workdateMonth1 = "";
        for (let i = 0; i < 12; i++) {
          this.selectWorkdateMonth[i].disabled = false;
          this.selectWorkdateMonth1[i].disabled = false;
        }
        resolve();
      });
    },
    handleAction(type, row = {}) {
      switch (type) {
        case "detials":
          // 明细信息
          detail({ id: row.id }).then((res) => {
            this.formData = _.clone(res.result);
            this.$refs.billingDetailsDialog.show();
          });

          break;
      }
    },
  },
};
</script>
<style>
.form-container {
  width: 1000px;
}
</style>
